<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>新增角色</title>
    <link href="${webroot }/static/plugins/bootstrap-3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
    <!--时间插件-->
    <link rel="stylesheet" href="${webroot }/static/css/bootstrap-datetimepicker.min.css">
    <!--重置文件-->
    <link rel="stylesheet" href="${webroot }/static/plugins/inputFile/css/style.css" />
    <link rel="stylesheet" href="${webroot }/static/plugins/inputFile/css/ssi-uploader.min.css">
    <link rel="stylesheet" href="${webroot }/static/plugins/icheck/custom.css">
    <link rel="stylesheet" href="${webroot }/static/plugins/icheck/skins/all.css">
    <link rel="stylesheet" href="${webroot }/static/css/reset.css">
    <link rel="stylesheet" href="${webroot }/static/css/merchantGrant.css">
    <jsp:include page="../common/common.jsp"/>
</head>
<body>
<section class="content">
    <ol class="breadcrumb">
        <li>角色管理</li>
        <li class="active">
           	新增角色
        </li>
    </ol>
    <article  id="defaultForm"	class="searchsForm clearfix form-horizontal">
        <form id="addRoleForm" method="post" class="form-horizontal">
            <div class="form-group clearfix">
                <div class="col-lg-6 col-md-6">
                </div>
                <div class="col-lg-6 col-md-6">
                    <a  id="subButton" class="btn btn-primary w-50 fr" style="margin-left: 10px; margin-right: 10px;" onclick="addRole('addRoleForm');" >提交</a>
                    <a href="javascript:void(0);" onclick="$('#addRoleForm')[0].reset();" ><input type="text" class="btn btn-primary w-50 fr btn-reset" value="重置"></a>
                    <a style="color: #fff;" href="javascript:history.go(-1);"><input  type="text" id="backButton" value="返回上一级" class="btn btn-primary w-50 fr" style="margin-left: 10px;width: 98px !important; margin-right: 10px;"></a>
                </div>
            </div>
            <div class="form-group clearfix">
                <span style="color: red;margin:left:30px;">注意：带“*”号的都是必填项！</span>
            </div>
            <div class="form-group clearfix">
                <label class="fl w-160 control-label">角色中文名<font style="color: red;"> *</font></label>
                <div class="fl w-300">
                    <input type="text" name="zhName" value="${sysRole.zhName}" id="zhName" class="form-control"/>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="fl w-160 control-label">角色标识<font style="color: red;"> *</font></label>
                <div class="fl w-300">
                    <input type="text" name="enName" value="${sysRole.enName}" id="enName" class="form-control"/>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="fl w-160 control-label">所需属子系统&nbsp;&nbsp;</label>
                <div class="fl w-300">
                    <input type="text" name="subSystem" value="${sysRole.subSystem}" id="subSystem" class="form-control" />
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="fl w-160 control-label">组织编码&nbsp;&nbsp;</label>
                <div class="fl w-300">
                    <input type="text" name="orgId"  id="parentId" class="form-control" value="${sysRole.orgId}" />
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="fl w-160 control-label">状态<font style="color: red;"> *</font></label>
                <div class="fl w-120 posiRE">
                    <input type="radio" checked="checked"  name="status" value="2"/>
                    <span>禁用</span>
                </div>
                <div class="fl w-120 posiRE">
                    <input type="radio"  name="status" value="1"/>
                    <span>启用</span>
                </div>
            </div>
            <div class="form-group clearfix">
                <label class="fl w-160 control-label">备注&nbsp;&nbsp;</label>
                <div class="fl w-300">
                    <input type="text" value="${sysRole.remark}" name="remark" id="remark" class="form-control" />
                </div>
            </div>
        </form>
    </article>
</section>
<script type="text/javascript">
// icheck
$('input').iCheck({
    checkboxClass: 'icheckbox_square-green',
    radioClass: 'iradio_square-green',
    increaseArea: '20%' // optional
});
addFormValidatorRule("addRoleForm");
function addFormValidatorRule(formId){
	$('#' + formId).bootstrapValidator({
        message: 'This value is not valid',
        feedbackIcons: {/*输入框不同状态，显示图片的样式*/
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {/*验证*/
		 	//角色中文名
            zhName: {
                message: 'The zhName is not valid',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '角色中文名不能为空'
                    },
                    regexp: {
                        regexp: /^[\u4e00-\u9fa5]+$/,
                        message: '角色中文名只能输入汉字'
                    },
                    stringLength: {/*长度提示*/
                        min: 2,
                        max: 15,
                        message: '角色中文名长度必须在2到15之间'
                    },
                    threshold :  2 , //有2字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，2字符以上才开始）
                    remote: { //ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
                        url: webroot + '/admin/system/checkRoleExist',//验证地址
                        message: '角色中文名已存在', //提示消息
                        delay :  3000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置3秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                        type: 'POST',//请求方式
                        /**自定义提交数据，默认值提交当前input value*/
                        data: function(validator) {
                              return {
                            	  zhName: $('#zhName').val()
                              };
                        }
                    }/*最后一个没有逗号*/
                }
            },
		 	// 角色标识
            enName: {
                message: 'The enName is not valid',
                validators: {
                    notEmpty: {/*非空提示*/
                        message: '角色标识不能为空'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_-]+$/,
                        message: '角色标识只能输入数字、字母、下划线、横线'
                    },
                    stringLength: {/*长度提示*/
                        min: 5,
                        max: 15,
                        message: '角色标识长度必须在5到15之间'
                    },
                    threshold :  6 ,
                    remote: { //ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}  
                        url: webroot + '/admin/system/checkRoleExist',//验证地址
                        message: '角色标识已存在', //提示消息
                        delay :  3000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置3秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                        type: 'POST',//请求方式
                        /**自定义提交数据，默认值提交当前input value*/
                        data: function(validator) {
                              return {
                            	  enName: $('#enName').val()
                              };
                        }
                    }/*最后一个没有逗号*/
                }
            }
        }
    });
}

function addRole(formId){
	var bootstrapValidatorData = $("#" + formId).data('bootstrapValidator');
    if (bootstrapValidatorData) {
    	//修复记忆的组件不验证
    	bootstrapValidatorData.validate();
        if (!bootstrapValidatorData.isValid()) {
            return false;
        }
    }
	$.confirm({
		title: false,
		content: '确认新增角色吗？',
		type:'green',
		autoClose: 'cancle|3000',
		backgroundDismiss: true,
		buttons: {
			ok: {
				btnClass: 'waves-effect waves-button',
				text: '确定',
				action: function(){
					$.ajax({
				        type: "POST",
				        dataType: "json",
				        url: webroot+"/admin/system/addRole",
				        data: $("#" + formId).serialize(),
				        success:function(data){
				        	checkResponseData(data,"1",webroot + "/admin/page/system/roleList");
				        },
				        error:function(){
				            $.alert({title:"错误", content:"请求新增角色接口错误，请查找原因！"});
				        }
				    });
				}
			},
			cancle: {
	            text: '取消',
	            btnClass: 'btn-primary',
	            action: function(){
	                // button action.
	            }
	        }
		}
	});
}
</script>
</body>
</html>
